<template>
	<view >
		<view class="back flex_c">
			<image src="../../static/icon/left_jt.png" mode="aspectFill" @click="goBack"></image>
			<text>领取记录</text>
		</view>
		<view class="poster">
			<image class="poster_img1" :src="activityImg" mode="aspectFill"></image>
			<view class="backboard">
				<view class="receive_box flex_dq"  v-for="(item,index) in receiveList" :key="index">
					<view class="receive_box_l flex_dq">
						<image :src="item.goods_image" mode="aspectFill"></image>
					</view>
					<view class="receive_box_r flex_Z">
						<text class="f32 c3">{{item.goods_name}}</text>
						<text class="f26 c6">领取账号：{{phoneNumShow(item.member.account)}}</text>
						<text class="f26 c6">领取时间：{{item.create_time}}</text>
					</view>
				</view>
				<!-- 暂无数据 / 加载更多 -->
				<view class="empty"></view>
				<noDatas :xxxList="receiveList" :status="status"></noDatas>
			</view>
			
		</view>
	</view>
</template>

<script>
	import {
		activityRecordList,
	} from '../../api/guessing.js'
	export default {
		data() {
			return {
				page: 1,
				size: 10,
				status: 'loadmore', //加载前值为loadmore，加载中为loading，没有数据为nomore
				activityId:'',
				activityImg:'',
				receiveList:[],
			}
		},
		onLoad(e) {
			this.activityId = e.activityId
			this.activityImg = e.img
			this.initDetails()
		},
		methods: {
			// 详情
			initDetails() {
				activityRecordList({activity_id:this.activityId}).then(res => {
					console.log(res);
					if (res.code == 1) {
						let list = res.data.data;
						this.receiveList = this.page == 1 ? list : this.receiveList.concat(list);
						console.log(this.receiveList);
						if (list.length < this.size) this.status = 'nomore';
						else this.status = 'loading';
					}
				})
			},
			//隐藏手机号
			phoneNumShow(phone) {
				// console.log('手机号',phone);
				let mphone = phone.substring(0, 3) + '****' + phone.substring(7);
				return mphone;
			},
			goBack() {
				//获取页面栈的长度
				const canNavBack = getCurrentPages()
				console.log(canNavBack.length);
				// 判断是否刷新了浏览器，刷新了浏览器，页面栈只有当前一个
				if (canNavBack.length > 1) {
					uni.navigateBack({
						delta: 1
					})
				} else {
					uni.switchTab({
						url: '/pages/index/index'
					})
				}
			},
		},
		// 下拉刷新
		onPullDownRefresh() {
			console.log('下拉刷新');
			let that = this;
			setTimeout(function() {
				that.page = 1,
				that.search = '',
				that.values = '最新上架',
				that.choiceType = 'create_time desc'
				that.receiveList = [],
				that.initList()
			}, 800);
		},
		//触底加载
		onReachBottom() {
			console.log('触底加载');
			if (this.status != 'nomore') {
				this.page = this.page + 1
				this.initList()
			}
		}
	}
</script>

<style scoped>
	page {
		background: #fb7f42;
	}

	@font-face {
		font-family: 'iconfont';
		src: url("~@/iconfont/almm.ttf");
	}

	.back {
		position: fixed;
		top: 30rpx;
		/* #ifdef APP */
		top: 60rpx;
		/* #endif */
		left: 20rpx;
		width: 100%;
		height: 88rpx;
		z-index: 999;
	}

	.back>text {
		font-size: 28rpx;
		/* #ifdef APP */
		font-size: 36rpx;
		/* #endif */
		color: #ffffff;
	}

	.back>image {
		position: absolute;
		top: 50%;
		left: 0;
		transform: translateY(-50%);
		width: 60rpx;
		height: 60rpx;
	}

	.poster {
		position: relative;
		width: 100%;
		height: 1060rpx;
	}

	.poster_img1 {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 1060rpx;
		z-index: 6;
	}
	.backboard{
		position: absolute;
		top: 130rpx;
		left:50%;
		transform: translateX(-50%);
		width: 690rpx;
		height: 1480rpx;
		background: #FCFBFA;
		z-index: 9;
		border-radius: 28rpx;
	}
	.receive_box{
		width: 100%;
		/* background: pink; */
		margin-top: 56rpx;
	}
	.receive_box_l>image{
		width: 140rpx;
		height: 140rpx;
		margin: 0 48rpx;
		border-radius: 16rpx;
	}
	.receive_box_r{
		
	}
	
	
</style>